import { useEffect } from "react";
// import styles from "./MapContainer.css";
import AMapLoader from "@amap/amap-jsapi-loader";
import { ProductCard, Tag, Button } from 'react-vant';

export default function MapContainer() {
  let map = null;

  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "6ce2ee5dedd423ed4c446d59b920ffb0",
    };
    AMapLoader.load({
      key: "73bbb5e993f9134e652ba5697e886f1a", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })

      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });

        var position = [
          [126.493195, 39.993253],
          [116.473195, 39.993253],
          [116.453195, 39.993253],
          [116.493195, 39.973253],
          [116.453195, 39.973253],
          // [116.493195, 39.953253],
          [116.473195, 39.953253],
          // [116.453195, 39.953253]
        ];
        var content = [
          '小明',
          '张三',
          '小明',
          '小明',
          '小明',
          '小明',
          '小明',
          '小明',
          '小明'
        ]
        for (var i = 0; i < position.length; i++) {
          const marker = new AMap.Marker({
            position: position[i],
            label: {
              content: '位置', //将 html 传给 content
              offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
            }

          });
          map.add(marker);
        }

     
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);

  return (
    <div
      id="container"
      // className={styles.container}
      style={{ height: "400px" }}
    ></div>
    
  );
}
import React from 'react'

